<template>
  <div class="content">
    <div class="content-left">
      <div class="contente-one">
        <div class="content-left-title">灾害预警</div>
        <TimeSetup :timeline-list="data"></TimeSetup>
      </div>
      <div class="content-two">
        <div class="content-detail">详情</div>
        <div class="content-detail-text">
          <div class="desc">
            <div class="data">12:00:00  2022-07-20</div>
            <div class="title">台风红色预警</div>
            国家海洋预报台根据《海洋灾害应急预案》发布海浪警报解除通报。 受今年第5号台风“桑达”（热带风暴级）的影响，7月30日中午至8月1日上午，东海、黄海南部出现了2.5到4.0米的大浪到巨浪区；山东半岛东部、江苏南部、上海、浙江北部近岸海域出现了1.5到2.8米的中浪到大浪。目前受影响海域的浪高已减小到警报发布标准以下，海浪警报解除，特此通报。 未来24小时内，黄海南部、东海北部仍将维持2.5到4.5米的大浪到巨浪区。</div>
        </div>
        <div class="content-history">历史信息</div>
      </div>
    </div>
    <div class="content-middle">
      <div class="middle-top">
        <div class="title">预警时间轴</div>
        <div class="search-tool">
          <div class="search-input">
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="请输入日期"
              :default-value="new Date(2010, 9, 1)"
            />
            <div class="btn-back">搜索</div>
            <div class="search-left">
              <span></span>
            </div>
            <div class="search-right">
              <span></span>
            </div>
          </div>
          <div class="search-time">
            实时时间:
            <div class="btn-back">回到最新</div>
          </div>
        </div>
        <div class="search-table">
          <WarningTime></WarningTime>
        </div>
      </div>
      <div class="middle-bottom"></div>
    </div>
    <div class="content-right">
        <div>
          <div class="content-right-title">灾害预警</div>
          <div class="content-right-item">
            <div>风向</div>
            <div>35°</div>
          </div>
          <div class="content-right-item">
            <div>温度</div>
            <div>×××××××</div>
          </div>
          <div class="content-right-item">
            <div>湿度</div>
            <div>×××××××</div>
          </div>
          <div class="content-right-item">
            <div>风力</div>
            <div>×××××××</div>
          </div>
          <div class="content-right-item">
            <div>浪潮</div>
            <div>×××××××</div>
          </div>
          <div class="content-right-item">
            <div>潮汐</div>
            <div>×××××××</div>
          </div>
          <div class="content-right-item">
            <div>大气压</div>
            <div>×××××××</div>
          </div>
          <div class="content-right-item">
            <div>降雨量</div>
            <div>×××××××</div>
          </div>
        </div>
        <div class="echarts-wrap">
          <div class="content-echarts">历史图表</div>
        </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import TimeSetup from '@/components/TimeSetup.vue';
import WarningTime from '@/components/WarningTime.vue';
import { reactive, ref } from 'vue';

const value1 = ref('')
const data = reactive([
  { title: '台风红色预警', time: '12:00:00  2022-07-20', color: '#FF0004' },
  { title: '台风蓝色预警', time: '12:00:00  2022-07-20', color: '#006FFF' },
  { title: '台风橙色预警', time: '12:00:00  2022-07-20', color: '#FF5F04'},
  { title: '台风黄色预警', time: '12:00:00  2022-07-20', color: '#FFCD05'},
])
</script>
<style lang='scss' scoped>
.content {
  display: flex;
  justify-content: space-between;
  color: #fff;
  height: calc(100% - 90px);
  .content-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 20%;
    height: auto;
    background-image: url("../assets/images/u34.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .contente-one {
      padding: 0px 20px;
      overflow: hidden;
    }
    .content-two {
      padding: 0px 20px;
      overflow: hidden;
      .content-detail {
        color: #89F8FF;
        margin-bottom: 10px;
      }
      .content-history {
        width: 100%;
        height: 40px;
        margin-bottom: 40px;
        margin-top: 20px;
        color: #fff;
        line-height: 20px;
        text-align: center;
        background-color: #003759;
        border: 1px solid #d1d6da;
        color: #fff;
        border-radius: 10px;
        line-height: 40px;
      }
      .content-detail-text {
        .desc {
          color: #2180D8;
          font-size: 10px;
          font-weight: 400;
          line-height: 30px;
          border: 1px solid #2180D8;
          padding: 10px;
          border-radius: 10px;
          .data {
            color: #2180D8;
            padding-bottom: 4px;
          }
          .title {
            color: red !important;
            padding-bottom: 10px;
          }
        }
      }
    }
    .content-left-title {
      font-size: 18px;
      color: #89F8FF;
      text-align: center;
      align-items: center;
      padding-top: 20px;
    }
  }
  .content-middle {
    width: 60%;
    height: calc(100vh - 100px);
    padding: 0px 20px;
    box-sizing: border-box;
    .middle-top {
      width: 100%;
      height: 230px;
      background-image: url("../assets/images/u34.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .title {
        font-size: 18px;
        color: #89F8FF;
        text-align: center;
        align-items: center;
        padding-top: 10px;
      }
      .search-tool {
        padding: 20px 60px 0px 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #0094ff;
        .search-input {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          .search-left {
            position: relative;
            width: 40px;
            height: 40px;
            border: 2px solid #fff;
            border-radius: 50%;
            margin-right: 20px;
            span {
              position: absolute;
              left: 8px;
              top: 2px;
              width:0;
              height:0;
              border-right:15px solid #0094ff;
              border-bottom:15px solid transparent;
              border-top:15px solid transparent;
            }
          }
          .search-right {
            position: relative;
            width: 40px;
            height: 40px;
            border: 2px solid #fff;
            border-radius: 50%;
            span {
              position: absolute;
              right: 8px;
              top: 2px;
              width:0;
              height:0;
              border-top: 15px solid transparent;
              border-left: 15px solid #0094ff;
              border-bottom: 15px solid transparent;
            }
          }
        }
        
        .btn-back {
          width: 100px;
          height: 40px;
          background-color: #003759;
          border: 1px solid #0094ff;
          line-height: 40px;
          text-align: center;
          color: #0094ff;
          border-radius: 10px;
          margin-left: 10px;
          margin-right: 10px;
        }
      }
      .search-time {
        display: flex;
        align-items: center;
      }
    }
    .middle-bottom {
      background-color: #fff;
      width: 100%;
      height: calc(100vh - 330px);
      border-radius: 20px;
    }
  }
  .content-right {
    width: 20%;
    height: auto;
    background-image: url("../assets/images/u34.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .content-right-title {
      font-size: 18px;
      color: #89F8FF;
      text-align: center;
      align-items: center;
      padding-top: 20px;
      padding-bottom: 20px;
    }
    .content-right-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 20px;
      margin: 0px 30px;
      background-color: #003759;
      border: 1px solid #d1d6da;
      color: #fff;
      border-radius: 10px;
      padding: 10px 20px;
      margin-bottom: 10px;
    }
    .echarts-wrap {
      padding: 0px 30px;
      .content-echarts {
        width: 100%;
        height: 40px;
        margin-bottom: 40px;
        margin-top: 20px;
        color: #fff;
        line-height: 20px;
        text-align: center;
        background-color: #003759;
        border: 1px solid #d1d6da;
        color: #fff;
        border-radius: 10px;
        line-height: 40px;
      }
    }
  }
}
</style>
